<template>
  <div id="home">
    <!-- 标题 -->
    <nav-bar class="topNav">
      <div slot="navCenter">购物街</div>
    </nav-bar>
    <tab-control
      :titles="titles"
      v-show="tabControl2IsShow"
      @getIndex="getIndex"
      ref="tabControl2"
      class="tabFixed"
    ></tab-control>
    <b-scroll
      class="homeBScontent"
      ref="bScroll"
      :probeType="3"
      @getPosition="getPosition"
      :pullUpLoad="true"
      @pullingUp="pullingUp"
    >
      <!-- 轮播区域 -->
      <home-swiper :homeBanner="homeBanner" @homeSwiperImgLoad="homeSwiperImgLoad"></home-swiper>
      <!-- 推荐区域 -->
      <home-recom :homeRecommend="homeRecommend" @homeRecomImgLoad="homeRecomImgLoad"></home-recom>
      <!-- 特色 -->
      <home-feature></home-feature>
      <!-- tab切换栏 -->
      <tab-control :titles="titles" @getIndex="getIndex" ref="tabControl1"></tab-control>
      <!-- 商品列表展示 -->
      <goods-list :goodsList="getTabType"></goods-list>
    </b-scroll>
    <back-top class="homeBacktop" @click.native="backTop" v-show="backIsshow"></back-top>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import TabControl from "components/context/tabcontrol/TabControl";
import BackTop from "components/context/backtop/BackTop";
import GoodsList from "components/context/goods/GoodsList";

import BScroll from "components/common/bscroll/BScroll";

import HomeSwiper from "./childcomps/HomeSwiper";
import HomeRecom from "./childcomps/HomeRecom";
import HomeFeature from "./childcomps/HomeFeature";

import { getHomeData, getHomeGoodsList } from "networks/home";
import { listenerItemMixin } from "common/mixin";
export default {
  name: "Home",
  components: {
    NavBar,
    TabControl,
    BackTop,
    GoodsList,
    BScroll,
    HomeSwiper,
    HomeRecom,
    HomeFeature
	},
  mixins: [listenerItemMixin],
  data() {
    return {
      homeBanner: null,
      homeRecommend: null,
      titles: ["流行", "新款", "精选"],
      goodsList: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] }
      },
      currentTab: "pop",
      backIsshow: false,
      tabControlTop: 0,
      tabControl2IsShow: false,
      homeLeaveLocation: null
    };
  },
  computed: {
    getTabType() {
      return this.goodsList[this.currentTab].list;
    }
  },
  methods: {
    /**
     * 网络请求相关的方法
     */
    // 获取首页轮播，推荐等数据
    getHomeData() {
      let _self = this;
      getHomeData()
        .then(result => {
          // console.log(result);
          _self.homeBanner = result.data.banner.list;
          _self.homeRecommend = result.data.recommend.list;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取首页商品列表的数据
    getHomeGoodsList(type) {
      let _self = this;
      let current = _self.goodsList[type];
      const page = (current.page += 1);
      getHomeGoodsList(type, page).then(res => {
        current.list.push(...res.data.list);
        _self.$refs.bScroll.finishPullUp();
      });
    },

    /**
     * 事件监听相关的方法
     */
    // 监听点击tab栏切换
    getIndex(index) {
      // console.log(this.$refs.tabControl1)
      // console.log(this.$refs.tabControl2)
      // // 这下面的两个refs的属性名前面搞成了大写。卧槽，搞到一直找不出错误
      // console.log(this.$refs.TabControl1)
      // console.log(this.$refs.TabControl2)
      this.$refs.tabControl2.currentIndex = index;
      this.$refs.tabControl1.currentIndex = index;
      switch (index) {
        case 0:
          this.currentTab = "pop";
          break;
        case 1:
          this.currentTab = "new";
          break;
        case 2:
          this.currentTab = "sell";
          break;
      }
    },
    // 返回顶部的方法
    backTop() {
      this.$refs.bScroll.scrollTo(0, 0, 1000);
    },
    // 监听页面滚动的位置
    getPosition(position) {
      this.backIsshow = -position.y > 1000;
      this.tabControl2IsShow = -position.y > this.tabControlTop;
    },
    pullingUp() {
      this.getHomeGoodsList(this.currentTab);
    },
    // 监听轮播图是否加载完成
    homeSwiperImgLoad() {
      if (this.homeRecomImgLoad()) {
        this.tabControlTop = this.$refs.tabControl1.$el.offsetTop;
      }
    },
    // 监听推荐图是否加载完成
    homeRecomImgLoad() {
      return true;
    }
  },
  created() {
    // 获取首页轮播，推荐等数据
    this.getHomeData();
    // 获取首页商品列表的数据
    this.getHomeGoodsList("pop");
    this.getHomeGoodsList("new");
    this.getHomeGoodsList("sell");
	},
	mounted(){},
  activated() {
    this.$refs.bScroll.refresh();
    this.$refs.bScroll.scrollTo(0, this.homeLeaveLocation, 0);
  },
  deactivated() {
    this.homeLeaveLocation = this.$refs.bScroll.scroll.y;
    this.$bus.$off("itemImgLoad", this.itemImgListenerLoad);
  }
};
</script>

<style>
#home {
  height: 100vh;
  /* padding: 44px 0 49px; */
  position: relative;
}
.topNav {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10;
	font-size: 18px;
  background-color: var(--color-tint);
  color: #fff;
}
.homeBScontent {
  position: absolute;
  top: 44px;
  left: 0;
  width: 100%;
  height: calc(100% - 93px);
}
.homeBacktop {
  position: fixed;
  bottom: 52px;
  right: 4px;
  z-index: 999;
}
/* 切换栏是否固定定位 */
.tabFixed {
  position: relative;
  top: 44px;
  left: 0;
  right: 0;
  z-index: 999;
}
</style>
